<template>
	<el-dialog :visible.sync="addVisible" @close="$emit('update:addVisible',false)" width="70%" :show-close='false' class="addQcPlanDialog"
	 :closeOnClickModal='false'>
		<span slot="title" class="dialog-title">
        
		  	选择质控类型
			<el-button  size="mini" @click="close" class="popupClose">关闭</el-button>
		</span>
		<div class="selectw100 seachTip">
			<div class="inlineblock verticalmiddle infoitem">
				<div class="inlineblock verticalmiddle">
					名称
				</div>
				<div class="inlineblock verticalmiddle informationItem">
					<el-input style="" v-model="searchName" size="mini" placeholder="质控类型名称" @keyup.enter.native="getQcType"></el-input>
				</div>
			</div>
			<div class="inlineblock basicRightDistanceA searchIcon">
				<el-button size="mini" @click="getQcType">搜索</el-button>
			</div>

		</div>
		<div class="heighHalf">
			<el-table :data="qcTypeList" style="width: 100%" size="mini" height="calc(100% - 33px)" @selection-change="handleSelectionChange"
			 ref="multipleTable">
				<el-table-column fixed type="selection" width="38px">
				</el-table-column>
				<el-table-column label="序号" min-width="50px">
					<template slot-scope="scope">
						{{scope.$index+1}}
					</template>
				</el-table-column>
				<el-table-column property="name" :show-overflow-tooltip="true" label="名称" min-width="100px">
				</el-table-column>
				<el-table-column property="genre" label="分类" min-width="120px" :formatter='formatterGenre'>
				</el-table-column>
				<el-table-column property="formula" label="公式" min-width="120px" :formatter='formatter'>
				</el-table-column>
			</el-table>
		</div>
		<span slot="footer" class="dialog-footer">
			<el-button type="primary" size="mini" @click="subQcType">确 定</el-button>
			<el-button  size="mini" @click="close">取 消</el-button>
		</span>
	</el-dialog>

</template>

<script>
	import { mapState } from 'vuex'

	export default {
		data() {
			return {
				qcTypeList: [], //qc计划列表
				multipleSelection: [], //选中的主仪器
				searchName:'',
					
			}
		},
		props: ['addVisible', 'detectAbiltyId', 'newOrEditQcPlan'],
		components: {

		},

		computed: {
			...mapState(['objectSelect', 'groupSelect', 'enableStatus','qcGenre']),
		},
		mounted() {

		},
		watch: {
			addVisible(val, oldVal) {
				if (val) {
					this.getQcType();
				}
			}
		},
		methods: {
			formatter(row, column, cellValue) {
				return this.util.changeStatus({ cellValue: cellValue, list: this.enableStatus })
			},
			formatterGenre(row, column, cellValue, index) {
				var arr = [];
				for (var i in this.qcGenre) {
					for (var j in this.qcGenre[i].children) {
						arr.push(this.qcGenre[i].children[j])
					}
				}
				return this.util.changeStatus({ cellValue: cellValue, list: arr })
			},

			getQcType() {
				this.$http({
					method: 'post',
					apiUrl: '/qc/chooseQcType.htm',
					params:{name:this.searchName},
					isJson:false,
				}).then(res => {
					if (res.code === 0) {
						this.qcTypeList = res.data;
					}

				})
			},

			handleSelectionChange(val) {
				this.multipleSelection = val
			},
			// 提交选中的qc类型
			subQcType() {
				var url = '/qc/initQcType.htm';
				this.$http({
					method: 'post',
					apiUrl: url,
					params:this.multipleSelection,
					isJson: true,
				}).then(res => {
					if (res.code === 0) {
						this.$message({
							type: 'success',
							message: '提交成功'
						});
						var params = {
							name: this.$parent.searchName,
							status: this.$parent.enableStatusValue,
							page: this.$parent.readQuery.page,
							pageCount: this.$parent.readQuery.pageCount,
						}
						this.close();
						this.$emit('readQcType', params)
					}

				})
			},
			// 清除选中
			toggleSelection(rows) {
				if (rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row);
					});
				} else {
					this.$refs.multipleTable.clearSelection();
				}
			},

			//关闭
			close(formName) {
				this.$emit('update:addVisible', false);
				this.toggleSelection()
			},
		}
	}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
	.addQcPlanDialog .el-dialog {
		margin-top: 10vh !important;
		height: 80%;
	}

	.addQcPlanDialog .el-dialog .el-dialog__body {
		height: calc(100% - 85px);
		padding: 10px;
	}

	.addQcPlanDialog .heighHalf {
		height: calc(100% - 60px)
	}

	.addQcPlanDialog .heighHalf .height40 {
		height: 40px;
		line-height: 40px;
	}
</style>